import React from 'react';
import {View, Text} from 'react-native';
import {Agenda, LocaleConfig} from 'react-native-calendars';

LocaleConfig.locales['fr'] = {
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    dayNames: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    today: '今天'
};
LocaleConfig.defaultLocale = 'fr';

export default class CalendarDetailWeekPage extends React.Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <Agenda
                    // 日程
                    items={{
                        '2019-09-16': [
                            {text: 'item 1 - any js object'},
                            {text: 'item 2 - any js object'},
                            {text: 'item 3 - any js object'},
                            {text: 'item 4 - any js object'},
                            {text: 'item 5 - any js object'},
                            {text: 'item 6 - any js object'},
                            {text: 'item 7 - any js object'},
                            {text: 'item 8 - any js object'},
                            {text: 'item 9 - any js object'},
                            {text: 'item 09 - any js object'},
                            {text: 'item 009 - any js object'},
                            {text: 'item 00009 - any js object'},
                        ],
                        '2019-09-17': [{text: 'item 2 - any js object'}],
                        '2019-09-18': [],
                        '2019-09-19': [{text: 'item 3 - any js object'}, {text: 'any js object'}],
                        '2019-09-20': [
                            {text: 'item 1 - any js object'},
                            {text: 'item 2 - any js object'},
                            {text: 'item 3 - any js object'},
                            {text: 'item 4 - any js object'},
                            {text: 'item 5 - any js object'},
                            {text: 'item 6 - any js object'},
                            {text: 'item 7 - any js object'},
                            {text: 'item 8 - any js object'},
                            {text: 'item 9 - any js object'},
                            {text: 'item 09 - any js object'},
                            {text: 'item 009 - any js object'},
                            {text: 'item 00009 - any js object'},
                        ],
                    }}
                    // 应该加载特定月份的项目时调用的回调（月份变为可见）
                    // loadItemsForMonth={(month) => { console.log('trigger items loading') }}
                    // 打开或关闭日历时触发的回调
                    // onCalendarToggled={(calendarOpened) => { console.log(calendarOpened) }}
                    // 在第二天按下调用的回调
                    // onDayPress={(day) => { alert('pressed') }}
                    // 在滚动日程列表时，当日期更改时调用的回调
                    // onDayChange={(day) => { alert(day) }}
                    // 最初选择的一天
                    // selected={'2019-09-12'}
                    // 可以选择的最小日期，minDate之前的日期将显示为灰色。默认=未定义
                    // minDate={'2012-05-10'}
                    // 可以选择的最大日期，maxDate之后的日期将显示为灰色。默认=未定义
                    // maxDate={'2012-05-30'}
                    // 允许滚动到过去的最大月数。默认= 50
                    pastScrollRange={50}
                    // 允许滚动到未来的最大月数。默认= 50
                    futureScrollRange={50}
                    // specify how each item should be rendered in agenda
                    // 指定每个项目应如何在议程中呈现
                    renderItem={(item, firstItemInDay) => {
                        return (<View style={{
                            marginBottom: 20,
                            backgroundColor: 'white',
                            height: 100
                        }}><Text>{item.text}</Text></View>);
                    }}
                    // 指定每个日期的呈现方式。如果该项目不是当天的第一天，则可以取消定义日期。
                    // renderDay={(day, item) => {return ( <View><Text>{day}</Text></View>); }}
                    // 指定应该如何呈现没有项目的空日期内容
                    renderEmptyDate={() => {
                        return (<View style={{
                            marginBottom: 20,
                            backgroundColor: 'white',
                            height: 100
                        }}><Text>空日期内容</Text></View>);
                    }}
                    // 指定议程旋钮的外观
                    // renderKnob={() => { return (<View><Text>程旋钮</Text></View>); }}
                    // 指定应该呈现的内容而不是ActivityIndi​​cator
                    renderEmptyData={() => {
                        return (<View style={{
                            marginBottom: 20,
                            backgroundColor: 'white',
                            height: 100
                        }}><Text>空数据呈现的内容</Text></View>);
                    }}
                    // 指定项目比较功能以提高性能
                    rowHasChanged={(r1, r2) => {
                        return r1.text !== r2.text
                    }}
                    //隐藏旋钮按钮。默认= false
                    // hideKnob={true}
                    // 默认情况下，如果议程日期至少有一个项目，则会标记议程日期，但如果需要，您可以覆盖此日期
                    // markedDates={{
                    //     '2019-05-16': { selected: true, marked: true },
                    //     '2019-05-17': { marked: true },
                    //     '2019-05-18': { disabled: true }
                    // }}
                    // 如果提供，将为“Pull to Refresh”功能添加标准RefreshControl。确保正确设置刷新道具。
                    // onRefresh={() => console.log('refreshing...')}
                    // 在等待刷新的新数据时设置为true
                    // refreshing={false}
                    // 添加自定义RefreshControl组件，用于为ScrollView提供pull-to-refresh功能。
                    // refreshControl={null}
                    // 议题主题
                    // theme={{
                    //     agendaDayTextColor: 'yellow',
                    //     agendaDayNumColor: 'green',
                    //     agendaTodayColor: 'red',
                    //     agendaKnobColor: 'blue',
                    //     arrowColor: 'white',
                    // }}
                    // 样式
                    style={{}}
                />
            </View>

        );
    }
}
